<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      th:replace="layout/base :: layout(~{::title}, ~{::main})">
<head>
    <title>个人中心 - 博客系统</title>
</head>
<body>
    <main>
        <div class="row">
            <div class="col-md-4">
                <div class="card mb-4">
                    <div class="card-body">
                        <h3 class="card-title">个人资料</h3>
                        <div class="mb-3">
                            <label class="form-label">用户名</label>
                            <p class="form-control-static" th:text="${#authentication.principal.username}">用户名</p>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">邮箱</label>
                            <p class="form-control-static" th:text="${#authentication.principal.email}">邮箱</p>
                        </div>
                        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#changePasswordModal">
                            修改密码
                        </button>
                    </div>
                </div>
            </div>
            <div class="col-md-8">
                <div class="card">
                    <div class="card-body">
                        <h3 class="card-title">我的文章</h3>
                        <div class="list-group list-group-flush">
                            <div th:if="${#lists.isEmpty(articles)}" class="text-center py-3">
                                暂无文章
                            </div>
                            <a th:each="article : ${articles}" 
                               th:href="@{'/article/' + ${article.id}}"
                               class="list-group-item list-group-item-action">
                                <div class="d-flex justify-content-between align-items-center">
                                    <h5 class="mb-1" th:text="${article.title}">文章标题</h5>
                                    <small th:text="${#temporals.format(article.createdAt, 'yyyy-MM-dd')}">发布时间</small>
                                </div>
                                <div class="mb-1">
                                    <span th:each="tag : ${article.tags}" 
                                          class="badge bg-secondary tag-badge" 
                                          th:text="${tag}">标签</span>
                                </div>
                                <small class="text-muted">
                                    评论：<span th:text="${article.commentCount}">0</span>
                                </small>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 修改密码模态框 -->
        <div class="modal fade" id="changePasswordModal" tabindex="-1">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">修改密码</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <form id="changePasswordForm">
                            <div class="mb-3">
                                <label for="oldPassword" class="form-label">当前密码</label>
                                <input type="password" class="form-control" id="oldPassword" required>
                            </div>
                            <div class="mb-3">
                                <label for="newPassword" class="form-label">新密码</label>
                                <input type="password" class="form-control" id="newPassword" 
                                       required pattern=".{6,100}" 
                                       title="密码长度必须在6-100个字符之间">
                            </div>
                            <div class="mb-3">
                                <label for="confirmNewPassword" class="form-label">确认新密码</label>
                                <input type="password" class="form-control" id="confirmNewPassword" 
                                       required oninput="checkPasswordMatch()">
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" onclick="changePassword()">确认修改</button>
                    </div>
                </div>
            </div>
        </div>

        <script th:inline="javascript">
            function checkPasswordMatch() {
                const newPassword = document.getElementById('newPassword');
                const confirmNewPassword = document.getElementById('confirmNewPassword');
                if (newPassword.value !== confirmNewPassword.value) {
                    confirmNewPassword.setCustomValidity('两次输入的密码不匹配');
                } else {
                    confirmNewPassword.setCustomValidity('');
                }
            }

            function changePassword() {
                const oldPassword = document.getElementById('oldPassword').value;
                const newPassword = document.getElementById('newPassword').value;
                const confirmNewPassword = document.getElementById('confirmNewPassword').value;

                if (newPassword !== confirmNewPassword) {
                    alert('两次输入的新密码不匹配');
                    return;
                }

                fetch('/api/users/change-password', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Authorization': 'Bearer ' + getToken()
                    },
                    body: JSON.stringify({
                        oldPassword: oldPassword,
                        newPassword: newPassword
                    })
                })
                .then(response => response.json())
                .then(data => {
                    if (data.code === 200) {
                        alert('密码修改成功，请重新登录');
                        window.location.href = '/api/auth/logout-page';
                    } else {
                        alert(data.message);
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('修改密码失败');
                });
            }
        </script>
    </main>
</body>
</html> 